<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack</title>
    <link rel="stylesheet" href="../1style/index.css"/>
    <script src="../1style/jquery.js"></script>
</head>
<body>
<h1>Webpack</h1>

<h3>前端Webpack面试题三</h3>
<div>
    <pre>
        <a href="https://www.bilibili.com/video/BV1kA411M7kR" target="_blank">https://www.bilibili.com/video/BV1kA411M7kR</a>
    </pre>
</div>

<h3>import { Button } from 'antd'，打包的时候只打包button，分模块加载，是怎么做到的</h3>
<div>
    <pre>
        通过 babel-plugin-import 配置处理。相当于:
        import Button from 'antd/es/button';
        import 'antd/es/button/style/css';
        https://segmentfault.com/q/1010000018126828
    </pre>
</div>

<h3>使用import时，Webpack对node_modules里的依赖会做什么</h3>
<div>
    <pre>
        配置相关路径
    </pre>
</div>

<h3>webpack多个环境打包</h3>
<div>
    <pre>
    vue2 用的 process.argv 返回是数组  能获得 命令行的参数
    Node环境变量process.env
    解决跨平台cross-env
    其实 webpack 有个插件，就是 webpack.DefinePlugin
    new webpack.DefinePlugin({
        'process.env': require('./config/dev.env')  // process.env 这个就会被浏览器环境所识别
    }),
    </pre>
</div>

<h3>webpack优化打包速度</h3>
<div>
    <pre>
    一、减少文件搜索范围resolve.extensions=['.js','.vue']
      1.在导入没带文件后缀时会去尝试询问文件是否存在 2.resolve.modules 配置
      3.resolve.alias配置 4.loader缩小文件匹配范围
    二、设置noParse
    三、给babel-loader设置缓存
    https://blog.csdn.net/weixin_43684713/article/details/94390291
        dll
        缓存
        多进程打包
        https://quincychen.cn/webpack-optimization/
    </pre>
</div>

<h3>什么是bundle，什么是chunk，什么是module</h3>
<div>
    <pre>
        bundle是由webpack打包出来的文件，
        chunk是多模块合并成的，如：entry、import() 、splitChunk
        module：不同文件类型的模块,比如：js 、css 、sass、vue模块等不同文件类型的模块
    </pre>
</div>

<h3>Webpack整个生命周期，什么是loader，什么是plugin</h3>
<div>
    <pre>
        loader是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中
        plugin是用来自定义webpack打包过程中的方式，一个插件是含有apply方法的一个对象，
            通过这个方法可以参与到整个webpack打包的各个流程（生命周期）
    </pre>
</div>

<h3>webpack-dev-server和http服务器如nginx有什么不同</h3>
<div>
    <pre>
        webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，
        他比传统的http服务器对开发更加简单高效
    </pre>
</div>

<h3>什么是模块热更新：</h3>
<div>
    <pre>
        模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，
        是高级版的自动刷新浏览器（将代码重新执行而不整体刷新浏览器）
    </pre>
</div>

<h3>什么是Tree-shaking? CSS可以Tree-shaking吗</h3>
<div>
    <pre>
        Tree-shaking在打包中去除引入了,代码中没有被用到的那些死代码。
        在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking 得JS。
        Css需要使用Purify-CSS。
    </pre>
</div>

<h3>抽取公共文件是怎么配置的</h3>
<div>
    <pre>
    https://www.bilibili.com/video/BV1R54y1h7Xr
    optimization.splitChunks({
        chunks: 'all',
        cacheGroups: { // https://user-gold-cdn.xitu.io/2019/4/12/16a0f6273da38ee6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
            commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, // 当前公共模块出现的最少次数，
                priority: 5,
                reuseExistingChunk: true,
                minSize: 30, //抽离出的包的最小体积，默认30kb
            }
        }
    })
    </pre>
</div>

<h3>使用过Webpack里面哪些 Plugin 和 Loader</h3>
<div>
    <pre>
    loader 用于解析某些资源文件。css  ['style-loader', 'css-loader']
    plugin(插件) 用于扩展webpack的功能。
        html-webpack-plugin(生成html文件)
        extract-text-webpack-plugin(抽离css样式)
        拷贝资源||将图片文件转换为base64
    </pre>
</div>

<h3>plugin插件是怎么打包进去的</h3>
<div>
    <pre>
        https://fengmiaosen.github.io/2017/03/21/webpack-core-code/
    </pre>
</div>

<h3>dev-Server是怎么跑起来</h3>
<div>
    <pre>
    iframe模式（页面放在iframe中，当发送改变时重载）
    无需额外配置，只要以这种格式url访问即可。http://localhost:8080/webpack-dev-server/index.html
    inline模式（将webpack-dev-server的客户端入口添加到bundle中）
    inline模式下url不用发生变化，但启动inline模式分两种情况
        1.启动HTTP服务
        2.webpack构建时输出Bundle到内存，HTTP服务从内存中读取Bundle文件
        3.监听文件变化，重新执行第二个步骤
    </pre>
</div>

<h3>webpack 原理</h3>
<div>
    <pre>
        https://www.bilibili.com/video/BV1eC4y147RX  // webpack打包原理及优化
    </pre>
</div>

<h3>Webpack如何配Sass，需要配哪些Loader</h3>
<div>
    <pre>
        需要4个loader npm install -D sass-loader node-sass style-loader css-loader
        https://www.bilibili.com/video/BV1eC4y147RX  // webpack打包原理及优化
    </pre>
</div>



介绍ES6的功能
    let(不能重复声明) let区域内不存在变量提升 有严格的作用域 const const []改变不报错,是因为地址没变化
    块级作用域 (只在{}代码块内有效) 不存在变量提升(不影响向上找)
    新增了变量的解构赋值 模版字符串 ``     箭头函数 默认参数和rest
    提供了定义类的语法糖(class)
    扩展运算符 ...[合并数组,结构数组]
    Symbol
    迭代器 for of 自己实现一个迭代器
    生成器
    Promise
    get/map(对象的升级版) 数据类型
    Number 扩展 Number.isNaN() 方法用于确认一个值是否为NaN  Math.sign()
    数组新增了isArray / from / of 方法;数组实例新增了 entries()，keys() 和 values() 等方法
ES7 includes  array.includes
ES8 async 函数返回是Promise 这个函数也可以.then了

</body>
</html>

<script>
    $(function () {
        $("h3").click(function () {
            $(this).next().toggle();
        });
    })
</script>

